<template>
	<view style="height: 100%; weight: 100%;">
		
		<!-- ====== begin 顶部区域 ====== -->
		<view class='top-box' v-if="pageType != 3"> <!-- ====== 回鱼管理共用此页面 (修改：添加了v-if="pageType != 3") ====== -->
			<view class='header'>
				<view class='picTxt acea-row row-between-wrapper'>
					<view class='text'>
						<view class='name'>鱼票信息</view>
						<view>总共{{statics.total}}张鱼票，总消费{{statics.sumFee}}</view>
					</view>
					<view class='pictrue'>
						<image src='/static/images/orderTime.png'></image>
					</view>
				</view>
			</view>
			<view class='filter acea-row row-around'>
				<view class='item' :class='filterType==0 ? "on": ""' @click="clickFilter(0)">
					<view>全部</view>
					<view class='num'>{{statics.total}}</view>
				</view>
				<view class='item' :class='filterType==1 ? "on": ""' @click="clickFilter(1)">
					<view>待选位</view>
					<view class='num'>{{statics.countTobeSelectSeat}}</view>
				</view>
				<view class='item' :class='filterType==2 ? "on": ""' @click="clickFilter(2)">
					<view>垂钓中</view>
					<view class='num'>{{statics.countWorking}}</view>
				</view>
				<view class='item' :class='filterType==3 ? "on": ""' @click="clickFilter(3)">
					<view>待回鱼</view>
					<view class='num '>{{statics.countWaitRet}}</view>
				</view>
				<view class='item' :class='filterType==4 ? "on": ""' @click="clickFilter(4)">
					<view>结束</view>
					<view class='num '>{{statics.countEnd}}</view>
				</view>
				<view class='item' :class='filterType==5 ? "on": ""' @click="clickFilter(5)">
					<view>退票</view>
					<view class='num '>{{statics.countRefund}}</view>
				</view>
			</view>
		</view>
		<!-- ====== end 顶部区域 ====== -->
		
		<!-- ====== 分页加载功能 (修改：外层增加了scroll-view) ====== -->
		<!-- ====== 回鱼管理共用此页面 (修改：scroll-view中添加了:class="{forRetFshManager:pageType==3}") ====== -->
		<scroll-view :class="{forRetFshManager:pageType==3}" scroll-y scroll-with-animation @scrolltolower="onScrollToLower" lower-threshold="2">  
			<view style="margin:30rpx 30rpx;" v-for="(order, orderIdx) in orders" :id="order.id" :key="orderIdx">
				<view>{{orderIdx+1}}.</view>
				<uni-list style="width: 100%;" :border="true">
					<uni-list-item title="订单号 / 状态" :rightText="order.id + ' / ' + order.stateName"></uni-list-item>
					
					<uni-list-item title="钓场" :rightText="order.merName"></uni-list-item>

					<uni-list-item v-if="order.partitionMode===1" 
						title="鱼塘 / 分区 / 钓位" :rightText="order.pondName + ' / ' + order.pondPartitionName + ' / ' + (order.seatNo?order.seatNo:'?')">
					</uni-list-item>
					
					<uni-list-item v-else 
						title="鱼塘 / 钓位" :rightText="order.pondName + ' / ' + (order.seatNo?order.seatNo:'?')">
					</uni-list-item>
					
					<uni-list-item v-if="isCmh"
						title="鱼塘Id / 钓位Id" :rightText="order.pondId + ' / ' + (order.seatId?order.seatId:'?')">
					</uni-list-item>
					
					<uni-list-item
						title="设备IMEI号" :rightText="order.useDevice==1?order.deviceSn:'无设备'" >
					</uni-list-item>
					
					<!--
					<uni-list-item title="模式" :rightText="order.timeMode"></uni-list-item>	
					<uni-list-item title="买票时间" :rightText="order.payTime"></uni-list-item>
					<uni-list-item title="票价" :rightText="order.price"></uni-list-item>
					-->
					
					<uni-list-item v-if="order.ypTimeMode===2" 
						title="鱼票日期 / 时长" :rightText="order.ypStartDay + ' / ' + order.ypDuration" >
					</uni-list-item>
					
					<uni-list-item v-else 
						title="鱼票日期 / 时间" :rightText="order.ypStartDay + ' / ' + order.ypStartTime + ' ~ ' + order.ypEndTime" >
					</uni-list-item>
					
					<uni-list-item v-if="order.stateName!='已支付' && order.stateName!='已激活'" 
						title="实际开始时间 ~ 结束时间" :rightText="(order.startTime?order.startTime:'') + ' ~ ' + (order.endTime?order.endTime:'')">
					</uni-list-item>
					
					<uni-list-item v-if="order.stateName!='已支付' && order.stateName!='已激活'"  
						title="回鱼条数 / 斤数 / 金额" :rightText="order.totalRetNum + ' / ' + order.totalRetWeight + ' / ' + order.totalRetMoney">
					</uni-list-item>
					
					<uni-list-item v-if="(isPlatformAdmin || pageType==3 || pageType==1) && order.stateName!='已支付' && order.stateName!='已激活'" 
						title="回鱼详细记录" clickable  @click="gotoRetLogs($event, order.id)" >
						<template slot="footer">
							<span class="iconfont">&#xe6bd;</span>
						</template>
					</uni-list-item>
					
					<uni-list-item v-if="order.btnTitle2">
						<template slot="body" style="width: 100%; display: flex; justify-content: flex-end;">
							<button v-if="(order.ypTimeMode==1 && new Date().getTime() < new Date((order.ypStartDay+' '+order.ypEndTime).replace(/\-/g, '/')).getTime()) || order.ypTimeMode==2" style="width: 150rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white; margin-left:10rpx;"
								@click="doAction(order, order.btnTitle)">{{order.btnTitle}}</button> 
							<button style="width: 150rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white; margin-left:10rpx;"
								@click="doAction(order, order.btnTitle2)">{{order.btnTitle2}}</button> 
						</template>
					</uni-list-item>
					<uni-list-item v-else-if="order.btnTitle">
						<template slot="footer">
							<button style="width: 150rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;"
								@click="doAction(order, order.btnTitle)">{{order.btnTitle}}</button> 
						</template>
					</uni-list-item>
					
				</uni-list>
			</view>
			
			<!-- ====== begin 分页加载功能 ====== -->
			<view class="loading_text">
				<text>{{loadMoreText}}</text>
			</view>
			<!-- ====== end 分页加载功能 ====== -->
		</scroll-view>
		
		<!-- ====== begin 回鱼功能 ====== -->
		<!-- 回鱼模态窗口 -->
		<view class="cu-modal" :class="showRetFshModal?'show':''">
			<view class="cu-dialog">
				<view style="display: flex;justify-content: center; align-items: center; margin: 50rpx 0rpx; font-size: large; font-weight: bold;">
					<text>回鱼</text>
				</view>
				<view>
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">钓位：</view>
						<view style="width:400upx">{{currOrder.seatNo}}</view>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">计价方式：</view>
						<view style="width:400upx">{{currOrder.ypRetPriceType==2?"按条计费":"按斤计费"}}</view>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">回鱼类型：</view>
						<radio-group @change="radioChange" style="width:400upx">
							<label class="radio"><radio value="dec" checked="true" />减少</label>
							<label class="radio" style="margin-left: 20rpx;"><radio value="inc" />增加</label>
						</radio-group>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">条数：</view>
						<input style="width:400upx" type="number" v-model="retNumber" placeholder="请输入回鱼条数"></input>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">斤数：</view>
						<input style="width:400upx" type="digit" v-model="retWeight" placeholder="请输入回鱼斤数"></input>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">备注：</view>
						<input style="width:400upx" type="digit" v-model="retRemarks" placeholder="请说明回鱼原因"></input>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 50rpx 0rpx;">
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="hideModal">取消</button>
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="doRetFsh">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- ====== end 回鱼功能 ====== -->
	</view>
</template>

<script>
	import {
		queryMyOrders,
		retFsh
	} from '@/api/fsh.js';
	import {MyTip} from '../../components/ssty/common.js';
	const app = getApp();
	
	export default {
		data() {
			return {
				// ====== begin 顶部区域 ======
				filterType: 1,
				statics: {
					total: 0, 
					sumFee: '￥0',
					countTobeSelectSeat: 0,
					countWorking: 0,
					countWaitRet: 0,
					countEnd: 0,
				},
				// ====== end 顶部区域 ======
				
				// ====== begin 分页加载功能 ======
				pageNum: 0, 
				pageCount: 999999,
				loadMoreText: "上拉加载更多",
				// ====== end 分页加载功能 ======
				
				orders: [],
				
				// ====== begin 回鱼管理共用此页面 ======
				pageType: 1, // 1-垂钓>我的鱼票，查看当前用户的订单，2-我的>我的鱼票，查看当前用户的订单, 3-我的>回鱼管理，查看指定钓位的订单
				// ====== end 回鱼管理共用此页面 ======
				
				
				// ====== begin 回鱼功能 ======
				showRetFshModal: false,
				retNumber: null,
				retWeight: null,
				retRemarks: '',
				currOrder: undefined,
				retType: 'dec', // 'inc':增加, 'dec':减少 
				// ====== end 回鱼功能 ======
				
				isCmh: false,
				isPlatformAdmin: false,
			}
		},
		onLoad(options) {
			console.log("fshOders| onLoad=", options);
			// ====== begin 回鱼管理共用此页面 ======
			if(options.pageType) {
				this.pageType = options.pageType;
				this.seatId = options.seatId;
				if(this.pageType == 3) {
					uni.setNavigationBarTitle({
						title: "钓位的鱼票和回鱼记录"
					})
				}
			}
			if(options.filterType) {
				this.filterType = options.filterType;
			}
			// ====== end 回鱼管理共用此页面 ======
				
			this.isCmh = app.globalData.isCmh;
			this.isPlatformAdmin = app.globalData.isPlatformAdmin;
			
			this.queryOrders();
		},
		onShow() {			
			// begin fix bug: 查询回鱼详细记录，返回前一页面，不是停留在上一订单位置
			// if(this.pageNum > 0)
			// 	 this.pageNum -= 1;
			 // this.orders = [];
			 // this.queryOrders();
			// end				
		},
		methods: {
			// ====== begin 顶部区域 ======
			clickFilter(i) {
				this.filterType = i;
				
				// ====== begin 分页加载功能 ======
				this.pageNum = 0;
				this.orders = [];
				clearTimeout(this.loadMoreTimer);
				// ====== end 分页加载功能 ======
				
				this.queryOrders();
			},
			// ====== end 顶部区域 ======
			
			
			queryOrders() {
				uni.showLoading({
					title: '正在查询中...'
				});
				queryMyOrders(this.filterType, this.pageNum+1, this.seatId).then(res => {
					uni.hideLoading();
					// this.orders = res.entity.orders; // ====== 分页加载功能 (移到下面) ======
					this.statics = res.entity.statics;
					console.log("fshOders| queryOrders ok", this);
					console.log(res.entity.orders)
					// ====== begin 分页加载功能 ======
					this.pageNum += 1;
					this.pageCount = res.entity.pageCount;
					this.loadMoreText = this.pageNum >= this.pageCount ? "~ 没有更多数据了 ~" : "上拉加载更多";
					this.orders.push(...res.entity.orders);
					// ====== end 分页加载功能 ======
				}).catch(err => {
					console.log("fshOders| queryOrders fail:%o", err);
					uni.hideLoading();
					MyTip(err.msg);
				});
			},
			
			doAction(order, btnTitle) {
				let {id, odId, prodId, ypSeatMode} = order;
				console.log("fshOrders::doAction| id=%o, btnTitle=%o, ypSeatMode=%o", id, btnTitle, ypSeatMode);
				if(btnTitle == '垂钓') {
					// uniapp限制了uni.switchTab后不能带参数
					app.globalData.fshingPageYpOdId = id;
					uni.switchTab({
						url: '/pages/fsh_main/fishing'
					});
				}
				else if(btnTitle == '退票') {
					uni.navigateTo({
						url:`/pages/users/refund/confirm?order_id=${odId}&type=1&ids=${odId}&refund_type=1`
					})
				}
				else if(btnTitle == '选位') {
					if(ypSeatMode == 1) {
						uni.navigateTo({
							url:'/pages/fsh/selectSeat?ypOdId='+id
						})
					}
					else {
						uni.navigateTo({
							url:'/pages/fsh/lotterySeat?ypOdId='+id
						})
					}
				}
				else if(btnTitle == '删除') {
				}
				/* ====== begin 回鱼功能 ====== */
				else if(btnTitle == '修改回鱼') {
					this.currOrder = order;
					this.showRetFshModal = true;
				}
				/* ====== end 回鱼功能 ====== */
			},
			
			gotoRetLogs(e, odId) {
				console.log("gotoRetLogs", e, odId);
				uni.navigateTo({
					url:'/pages/fsh/fshRetLogs?odId='+odId
				})
			},
			
			
			// ====== begin 分页加载功能 ======
			onScrollToLower() {
				if(this.pageNum >= this.pageCount)
					return;
				console.log("fshOrders::onScrollToLower, queryOrders ..., page="+this.pageNum + 1);
				clearTimeout(this.loadMoreTimer);
				this.loadMoreTimer = setTimeout(()=>{
					this.queryOrders();
				}, 500);
			},
			// ====== end 分页加载功能 ======
			
			
			/* ====== begin 回鱼功能 ====== */
			radioChange(e) {
				console.log("radioChange", e);
				this.retType = e.detail.value;
			},
			doRetFsh() {
				if(!this.retNumber) {
					MyTip("请输入数量", 800);
					return;
				}
				if(this.retNumber < 0){
					MyTip("数量无效", 800);
					return;
				}
				
				if(!this.retWeight) {
					MyTip("请输入斤数", 800);
					return;
				}
				if(this.retWeight < 0.000001){
					MyTip("斤数无效", 800);
					return;
				}
				
				if(!this.retRemarks) {
					MyTip("请输入回鱼原因", 800);
					return;
				}
					
				uni.showLoading({
					title: '回鱼中...',
					mask: true
				});
				
				if(this.retType == 'dec') {
					this.retWeight *= -1;
					this.retNumber *= -1;
				}
				
				let odId = this.currOrder.id;
				retFsh(odId, this.retNumber, this.retWeight, 0, this.retRemarks, true).then(res => {
					this.showRetFshModal = false;
					this.pageNum = 0;
					this.orders = [];
					clearTimeout(this.loadMoreTimer);
					this.queryOrders();
					MyTip("回鱼成功");
				}).catch(err => {
					uni.hideLoading();
					MyTip("回鱼失败："+err.msg);
					this.showRetFshModal = false;
				});
			},
			
			hideModal() {
				this.showRetFshModal = false;
			},
			
			/* ====== end 回鱼功能 ====== */
		}
	}
</script>

<style lang="scss" scoped>
/* ====== begin 顶部区域 ====== */
	$topHeight: 280rpx;
	.top-box {
		height: $topHeight;
	}
	
	.top-box .header {
		height: 220rpx;
		padding: 0 30rpx;
		background-color: #e93323;
	}
	
	.top-box .header .picTxt {
		height: 160rpx;
		justify-content: space-between;
	}
	
	.top-box .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		// font-family: 'Guildford Pro';
		margin-left: 20rpx;
	}
	
	.top-box .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		maring-top: -10rpx;
		margin-bottom: 10rpx;
	}
	
	.top-box .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}
	
	.top-box .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}
	
	.top-box .filter {
		background-color: #fff;
		width: 650rpx;
		height: 110rpx;
		border-radius: 6rpx;
		margin: -70rpx auto 0 auto;
	}
	
	.top-box .filter .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 15rpx 0;
		min-width: 100rpx;
	}
	
	.top-box .filter .item.on {
		font-weight: bold;
		border-bottom: 5rpx solid #e93323;
	}
	
	.top-box .filter .item .num {
		margin-top: 18rpx;
	}
	/* ====== end 顶部区域 ====== */
	
	/* ====== begin 分页加载功能 ====== */
	scroll-view {
		white-space: initial;
		height:calc(100vh - #{$topHeight}); // 对scss变量做calc计算不能直接使用$topHeight，要加#{}
	}
	.loading_text {
		display: flex;
		justify-content: center;
		font-size: 20upx;
		margin: 48upx 0 60upx;
		color: #979797;
	}
	/* ====== end 分页加载功能 ====== */
	
	
	/* ====== begin 回鱼管理共用此页面 ====== */
	scroll-view.forRetFshManager {
		white-space: initial;
		height:calc(100vh - 0rpx); // 对scss变量做calc计算不能直接使用$topHeight，要加#{}
	}
	/* ====== end 回鱼管理共用此页面 ====== */
</style>
